<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 引入词云图插件, 在echarts中可以使用type=wordCloud引用
import 'echarts-wordcloud';
import { getKeyWordsData } from '@/api/index';

const option = ref({});

const renderChart = data => {
  option.value = {
    tooltip: {},
    series: {
      type: 'wordCloud',
      // 要求数据结构[{name: '词1', value: 100}, {name: '词2', value: 100},...]
      data: data,
      width: '100%',
      height: '100%',
      textStyle: {
        color() {
          // 生成随机颜色
          return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        },
      },
      // 强调高亮效果
      emphasis: {
        focus: 'self', // 仅高亮显示当前词云
        textStyle: {
          textShadowBlur: 5, // 文字阴影模糊度
          textShadowColor: '#333', // 文字阴影颜色
        },
      },
    },
  };
};

onMounted(async () => {
  const res = await getKeyWordsData();
  // console.log(res)
  const data = res.map(item => {
    return {
      name: item.keyWord,
      value: item.totalSearch,
    };
  });
  renderChart(data);
});
</script>

<style scoped></style>
